/**
 * Created by wangjz on 2018/12/05.
 */
import React, { Component } from 'react';
import { Input, Layout, Button, Table, Modal, message, notification, Divider, Form, Card, Select, Tag } from 'antd';
import '../less/index.less';
import { inject, observer } from 'mobx-react';
import UserDrawer from './UserDrawer';
import DeptTree from '../../components/DeptTree';
import ResetPasswordDialog from './ResetPasswordDialog';
import { CloseOutlined, EditOutlined, PlusOutlined, UnlockOutlined } from '@ant-design/icons';

const { Sider, Content, Header } = Layout;

@inject('store')
@observer
class Root extends Component {
  formRef = React.createRef();
  state = {
    passwordParams: {
      visible: false,
    },
  };

  onAddUser = () => {
    const { store } = this.props;
    if (store.currentDept.deptId == null) {
      notification['warning']({
        message: '提示',
        description: '请选择所属部门！',
      });
      return;
    }
    store.showUserDrawer();
  };

  onResetPassword = (record) => {
    this.setState({ passwordParams: { visible: true, uid: record.uid } });
  };

  onOk = () => {
    this.setState({ passwordParams: { visible: false } });
  };

  onDelete = record => {
    let that = this;
    Modal.confirm({
      title: '确认删除这个用户吗？',
      async onOk() {
        await that.props.store.deleteUser(record);
        message.success('删除用户成功！');
      },
    });
  };

  onTableChange = (pagination, filters, sorter) => {
    this.props.store.handlePaginationChange(pagination.current, pagination.pageSize, this.formRef.current.getFieldValue('searchName'));
  };


  onDeptSelect = node => {
    this.props.store.deptSelect(node);
  };

  onDeptOnload = node => {
    this.props.store.deptOnload(node);
  };

  render() {
    const { store } = this.props;
    const pagination = {
      showSizeChanger: true,
      pageSize: store.userListData.pageSize,
      current: store.userListData.pageNo,
      pageSizeOptions: ['10', '20', '50', '100'],
      total: store.userListData.total,
      showQuickJumper: true,
    };

    const columns = [
      { title: '登录帐号', dataIndex: 'loginName', key: 'loginName', width: 150 },
      { title: '用户名称', dataIndex: 'name', key: 'name', width: 150 },
      { title: '手机号', dataIndex: 'mobile', key: 'mobile', width: 150 },
      { title: 'email', dataIndex: 'email', key: 'email', width: 150 },
      // { title: '用户类型', dataIndex: 'typeName', key: 'typeName', width: 100 },
      { title: '扩展码', dataIndex: 'extCode', key: 'extCode', width: 200 },
      { title: '描述', dataIndex: 'remark', key: 'remark' }, {
        title: '状态', dataIndex: 'status', key: 'status', width: 80, render: function(text, record, index) {
          if (record.status == '1') {
            return <Tag color="#2db7f5">正常</Tag>;
          } else if (record.status == '2') {
            return <Tag color="#f50">冻结</Tag>;
          } else {
            return <Tag color="black">注销</Tag>;
          }
        },
      },
      {
        title: '操作', width: 200, align: 'center', render: function(text, record) {
          let disabled = record.isFixed ? 'disabled' : null;
          return (<span>
            <Button title='修改' size={'small'} type="ghost" shape="circle" onClick={() => store.showUserDrawer(record)}
                    icon={<EditOutlined/>} disabled={disabled} style={{ marginRight: 5 }}/>
            <Button title='删除' size={'small'} type="ghost" shape="circle" icon={<CloseOutlined/>}
                    disabled={disabled}
                    onClick={() => this.onDelete(record)} style={{ marginRight: 5 }}/>
            <Button title='重置密码' size={'small'} type="ghost" shape="circle" icon={<UnlockOutlined/>}
                    onClick={() => this.onResetPassword(record)}/>
          </span>);
        }.bind(this),
      }];

    return (
      <Layout className='layout'>
        <Sider className='sider' width={250}>
          <DeptTree onload={this.onDeptOnload} onSelect={this.onDeptSelect}/>
        </Sider>
        <Layout className='main'>
          <Header className='header'>
            <Button type='primary' icon={<PlusOutlined/>} onClick={this.onAddUser}>新增</Button>
            <div style={{ float: 'right', paddingBottom: 3 }}>
              <Form ref={this.formRef}>
                <Form.Item name='searchName'>
                  <Input.Search placeholder="用户名称" style={{ width: 200 }} onSearch={(name) => store.searchUser(name)}/>
                </Form.Item>
              </Form>
            </div>
          </Header>
          <Content className='content'>
            <Table rowKey="uid" size={'middle'} loading={store.userListData.loading}
                   dataSource={store.userListData.dataSource} columns={columns}
                   pagination={pagination} onChange={this.onTableChange}></Table>
            <UserDrawer/>
            <ResetPasswordDialog params={this.state.passwordParams} onOk={this.onOk}
                                 onCancel={this.onOk}/>
          </Content>
        </Layout>
      </Layout>
    );
  }
}

export default Root;
